<html>
   <head>
      <style type="text/css">
         #credentials {
           padding-top: 10%;
         }
         #credentials table {
           margin: auto;
         }
      </style>
      <script type="text/javascript" src="js/namespace.js"></script>
      <script type="text/javascript" src="js/notifier.js"></script>
      <script type="text/javascript" src="js/value_manipulation.js"></script>
      <script type="text/javascript" src="js/user_data.js"></script>
      <script type="text/javascript" src="js/urls.js"></script>
      <script type="text/javascript">

function getForm()
{
   return document.getElementById( "credentials" );
}
function restore()
{
   var form = getForm();
   form.user.value = ( localStorage[ "username"   ] )?localStorage[ "username"   ]:"";
   form.pass.value = ( localStorage[ "password"   ] )?localStorage[ "password"   ]:"";
   form.targ.value = ( localStorage[ "backendURI" ] )?localStorage[ "backendURI" ]:"";
}

function sanitizeURL( url )
{
   // HTTP and HTTPS ONLY!
   if( url.indexOf( "http" ) != 0 )
   {
      // default to HTTP.
      url = "http://" + url;
   }
   return url;
}

function testConfiguration()
{
   var form = getForm();
   var furl = sanitizeURL( form.targ.value );
   if( !form.user.value || !form.pass.value || !form.targ.value )
   {
      alert( "Please complete the form before continuing" );
      return;
   }
   var url  = furl + "?action=test&username=" + form.user.value + "&password=" + form.pass.value;
   var xhr  = getRequest( url );
   xhr.onreadystatechange = function() {
      if( xhr.readyState == 4 )
      {
         try
         {
             var json = JSON.parse( xhr.responseText );
             if( json && json.isKeepOrielServer )
             {
                localStorage[ "backendURI" ] = furl;
                if( json.loginSuccessful )
                {
                   localStorage[ "username" ] = form.user.value;
                   localStorage[ "password" ] = form.pass.value;
                   org.keeporiel.Notifier.displaySuccess( "configuration", "You are now free to save your spot in a PDF." );
                }
                else
                {
                   org.keeporiel.Notifier.displayCredentialsError( "Login or password was not recognized." );
                }
             }
             else
             {
                org.keeporiel.Notifier.displayCredentialsError( "URL is not a KeepOriel server" );
             }
         }
         catch( e )
         {
             org.keeporiel.Notifier.displayCredentialsError( "KeepOriel server URL returned unrecognizable data: " + xhr.responseText );
         }
      }
   }
   xhr.send();
}

      </script>
   </head>
   <body onload="restore();">
      <div id="cred_container">
         <form id="credentials" >
            <!--
               This would be better with spans and divs...
            -->
            <table>
               <tr>
                  <td>Email</td><td><input type="text" name="user" value="" size="50"/></td>
               </tr>
               <tr>
                  <td>Password</td><td><input type="password" name="pass" value="" size="50"/></td>
               </tr>
               <tr>
                  <td>KeepOriel Server URL</td><td><input type="text" name="targ" value="http://keeporiel.theophoruspress.com/page_saving.php" size="50"/></td>
               </tr>
               <tr>
                  <td colspan="2"><small>eg: keeporiel.theophoruspress.com/page_saving.php or http://keeporiel.theophoruspress.com/page_saving.php</small></td>
               </tr>
               <tr>
                  <td><a href="javascript:void(0)" onclick="testConfiguration()">Set configuration</a></td>
               </tr>
            </table>
         </form>
      </div>
   </body>
</html>
